<template>
  <el-drawer
    v-model="dialogFormVisible"
    :before-close="handleClose"
    destroy-on-close
    direction="rtl"
    :title="title"
    width="30%"
    @close="close"
  >
    <div class="formbody">
      <el-form ref="formRef" :inline="true" label-width="130px" :model="form" :rules="rules">
        <el-form-item label="字段名" prop="name">
          <el-input v-model="form.name" disabled />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="form.type" disabled />
        </el-form-item>
        <el-form-item label="长度" prop="length">
          <el-input v-model="form.length" disabled />
        </el-form-item>
        <el-form-item label="允许为空" prop="nullable">
          <el-input v-model="form.nullable" disabled />
        </el-form-item>
        <el-form-item label="注释" prop="description">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleUpdate">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { postRequest } from "@/api/mains";
import { succMsg, failMsg, confirm } from "@/utils/MessageUtils";

export default defineComponent({
  name: "TableColumnEdit",
  emits: {
    fetchData: null //fetchData事件没有检验
  },
  setup(props, { emit }) {
    const state = reactive({
      formRef: null,
      url: "system/databaseDoc/updateTableColumnDesc",
      id: "",
      form: {
        tableName: "",
        name: "",
        description: ""
      },
      title: "",
      dialogFormVisible: false,
      rules: {
        description: [
          {
            min: 1,
            max: 200,
            message: "表注释长度为1到200",
            trigger: "blur"
          }
        ]
      }
    });

    const showSubEdit = async row => {
      if (row == null || !row.name) {
        state.title = "新增";
        state.form.mainid = row.mainid;
      } else {
        state.title = "编辑";
        state.form = row;
      }
      state.dialogFormVisible = true;
    };

    //枚举数据缓存

    const close = () => {
      state["formRef"].resetFields();
      state.form = {
        tableName: "",
        name: "",
        description: ""
      };
      state.dialogFormVisible = false;
    };
    const handleClose = done => {
      confirm("确定退出吗？", () => {
        done();
      });
    };

    //控制保存（更新）
    const handleUpdate = async () => {
      state["formRef"].validate(async valid => {
        if (valid) {
          const { code, msg } = await postRequest(state.url, state.form);
          if (code == 200) {
            succMsg(msg);
            close();
            emit("fetchData");
          } else {
            failMsg(msg);
          }
        }
      });
    };

    return {
      ...toRefs(state),
      showSubEdit,
      close,
      handleUpdate,
      handleClose
    };
  }
});
</script>
<style lang="scss" scoped>
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 30%;
  padding: 10px;
  text-align: right;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 45%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-color-picker__icon {
      left: auto;
    }
    .el-form-item,
    .el-select,
    .el-input {
      width: 100%;
    }
    .el-form-item__content {
      width: 65%;
    }
  }
}
</style>
